---
import defaultSocials from "@content/socials.json"
import Icon from "../../lib/Icon.astro"
interface Social {
	href?: string
	icon: string
	title: string
}
export interface Props {
	socials?: Social[]
}
const { socials = defaultSocials } = Astro.props
---

<ul class="social">
	{
		socials.map(({ title, icon, href }) => (
			<li class="social__item">
				{href ? (
					<a href={href} class="social__link" target="blank">
						<Icon name={icon} />
						{title}
					</a>
				) : (
					<p class="social__link">
						<Icon name={icon} />
						{title}
					</p>
				)}
			</li>
		))
	}
</ul>

<style>
	.social {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.5em;
		padding: 0;
		margin: 0;
		list-style: none;
		--icon-size: 1.1em;
	}
	.social__link {
		text-decoration: none;
		color: inherit;
		display: flex;
		align-items: center;
		gap: 0.5em;
		margin: 0;
		color: inherit;
		filter: grayscale(100%);
		&:hover,
		&:focus-within {
			filter: none;
		}
	}
</style>
